<template  >
  <div  style="border-left: antiquewhite solid 1px; border-right: antiquewhite solid 1px;    width: 1000px; height: 100vh;margin-left: 100px">


    <div class="full-screen-container">
<!--       推出用户-->
      <div class="logout-container" @click="logout">
        <i class="el-icon-switch-button"></i>
        <span>退出</span>
      </div>
      <div class="warning-text">
        严禁上传、处理、发送、转发涉密信息
      </div>

      <el-card class="content-card">
        <el-input
            v-model="searchQuery.searchQueryInput"
            placeholder="规范名称检索---------多关键字分隔：“空格”与，“\”或"
            class="search-input"
            clearable
        >
          <template #append>
            <el-button :icon="Search" @click="handleSearch">搜索</el-button>
          </template>
        </el-input>

        <div class="search-tip">
        </div>

        <el-tabs v-model="activeTab"  @tab-click="handleTabClick" >
          <el-tab-pane label="消防规范"    name="0"></el-tab-pane>
          <el-tab-pane label="部局文件"   name="1"></el-tab-pane>
          <el-tab-pane label="地方文件"   name="2"></el-tab-pane>
          <el-tab-pane label="行业标准"   name="3"></el-tab-pane>
          <el-tab-pane label="答疑汇编"   name="4"></el-tab-pane>
        </el-tabs>


        <template v-if="itemProvincesId === '2'">
          <div>
            <label for="province">选择省份：</label>
            <select id="province" v-model="searchQuery.provincesId" @change="handleProvinceChange">
              <option value="0">全部</option>
              <option v-for="province in provinces" :key="province.id" :value="province.id">
                {{ province.name }}
              </option>
            </select>

            <!-- 示例内容，根据选择的省份显示 -->
            <div v-if="selectedProvince">
              <p>您选择了：{{ getProvinceNameById(searchQuery.provincesId) }}</p>
            </div>
          </div>
        </template>

        <div   style="display: flex ; flex-direction: row; justify-content: space-between;
         color: red ;font-width: 900;" >
              <span>{{titleArr[index]}}  </span>
          <span>版本 :{{new Date().getFullYear()}}-{{new Date().getMonth()+1}} </span>
        </div>
        <el-table :data="standards" style="width: 100% ; height: 500px">
          <el-table-column prop="titleTitle"  :cell-style="{ color: 'red' }">
          </el-table-column>

          <el-table-column width="60">
            <template #default>
              <el-button type="text" icon="el-icon-arrow-right"></el-button>
            </template>
          </el-table-column>
        </el-table>


        <el-pagination
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next"
            class="pagination"
        />

      </el-card>
    </div>

  </div>
</template>

<script>
import { ref } from 'vue';
import { Search } from '@element-plus/icons-vue';
import {titleList  ,queryAllProvinces} from  '@/api/index.js'

export default {
  setup() {
  },
  data() {
    return {
      searchQuery: {
        searchQueryInput : undefined,
        searchQueryType : 0,
        provincesId :0 ,
        pageSize :10,
        pageNum:1,
      },
      selectedProvince: '',
      provinces: [],
      itemProvincesId: 0,
      total:0 ,
      currentPage :1 ,
      pageNum:1,
      pageSize : 10 ,
      activeTab: '0',
      titleArr: ['最新消防规范·技术标准汇编', '规范管理组及部局文件、请示复函',
        '规范管理组及部局文件、请示复函！', '现行消防救援行业标准（XF）-汇编！',
        '规范主编单位及各省市的宣贯、答疑、解读！'],
      index: 0,
      standards: [

      ]
    }
  },
  created() {
    this.handleSearch()
    this.getListProvinces()
  },
  methods: {

    logout(){
        this.$router.push({
          path: "/login"
        });
    },
    getListProvinces(){
      //   查询全部省份
      queryAllProvinces().then(res => {
        var data = res.data;

        if (data.code != 200){
          this.$message.success('服务区异常！');
          return
        }
        this.provinces = data.data
      })
    },
    getProvinceNameById(id) {
      const province = this.provinces.find(p => p.id === id);
      return province ? province.name : '';
    },
    handleProvinceChange() {
      console.log(this.searchQuery);
      this.handleSearch();
    },

    handleCurrentChange(page){
      this.pageNum = page;
      this.searchQuery.pageNum = page
      this.handleSearch();
    },

    handleSearch() {

      titleList(this.searchQuery).then(res => {
          var data = res.data;
        if (data.code != 200){
          this.$message.success('服务区异常！');
          return
        }
        this.standards = data.data.data;
        this.total = data.data.total;
        this.pageSize = data.data.pageSize
        this.pageNum = data.data.pageNum
      })


    },
    handleTabClick(tab) {
      if (tab.paneName !== '2'){
        this.searchQuery.provincesId = 0
        this.itemProvincesId = '1'
      }else{
        this.itemProvincesId = tab.paneName
      }
      this.index = tab.paneName
      this.searchQuery.searchQueryType = tab.paneName ;
      this.handleSearch();
    }
  },

};
</script>

<style scoped>
.logout-container {
  display: inline-flex;
  align-items: center;
  color: #409EFF;
  cursor: pointer;
  padding: 5px 10px;
  border-radius: 4px;
  margin-left: auto;
}

.logout-container:hover {
  background-color: #f5f7fa;
  color: #66b1ff;
}

.logout-container i {
  margin-right: 5px;
}
/* 添加一些简单的样式 */
label {
  margin-right: 10px;
}

select {
  padding: 5px;
  font-size: 16px;
}

.full-screen-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  width: 100%;
  height: 100%;
  padding: 20px;
  box-sizing: border-box;
}

.warning-text {
  color: red;
  text-align: center;
  margin-bottom: 20px;
}

.content-card {
  width: 80%; /* 或者 100% 如果你想让卡片也满宽 */
  max-width: 1200px; /* 可选，限制最大宽度 */
}

.search-input {
  margin-bottom: 10px;
  width: 100%;
}

.search-tip {
  color: #999;
  margin-bottom: 10px;
}

.list-header {
  margin: 20px 0;
  font-weight: bold;
}

.version {
  color: red;
  margin-left: 10px;
}
</style>
